<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="" />
    <script src=""></script>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <style>
      #main {
        width: 80%;
        margin: 20px auto;
      }

      nav {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div id="main">
      <table class="table table-bordered">
        <tbody>
          <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>图片路径</th>
          </tr>
        </tbody>
      </table>
      <nav aria-label="Page navigation">
        <ul class="pagination">
          <li id="pre">
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  <script>
    var table = document.querySelector('table')
    //模拟后台响应的数据
    var json = [
      {
        product_id: '1001',
        product_name: 'java核心技术1',
        price: '120',
        imgurl: 'res/productimg/1.jpeg',
      },
      {
        product_id: '1002',
        product_name: 'java核心技术2',
        price: '130',
        imgurl: 'res/productimg/2.jpeg',
      },
      {
        product_id: '1003',
        product_name: 'web技术',
        price: '100',
        imgurl: 'res/productimg/3.jpeg',
      },
      {
        product_id: '1004',
        product_name: 'Mysql必知必会',
        price: '39',
        imgurl: 'res/productimg/4.jpeg',
      },
      {
        product_id: '1005',
        product_name: '中国近代史',
        price: '105',
        imgurl: 'res/productimg/4.jpeg',
      },
      {
        product_id: '1006',
        product_name: '世界史',
        price: '110',
        imgurl: 'res/productimg/1.jpeg',
      },
      {
        product_id: '1007',
        product_name: '高等数学',
        price: '50',
        imgurl: 'res/productimg/1.jpeg',
      },
      {
        product_id: '1008',
        product_name: '离散数学',
        price: '60',
        imgurl: 'res/productimg/1.jpeg',
      },
      {
        product_id: '1010',
        product_name: '线性代数',
        price: '50',
        imgurl: 'res\\productimg/3e83c2a6-b529-4bee-8ca9-ecc868b4d6f7.jpeg',
      },
      {
        product_id: '1011',
        product_name: '数据结构',
        price: '100',
        imgurl: 'res\\productimg/53dccb9f-b918-4a81-acc9-f99594992db1.jpeg',
      },
      {
        product_id: '1013',
        product_name: '人工智能',
        price: '120',
        imgurl: 'res\\productimg/94736781-046b-4c7c-8499-bebad2542b6f.jpg',
      },
      {
        product_id: '1014',
        product_name: '大数据',
        price: '120',
        imgurl: 'res\\productimg/f891569d-45e3-4b7f-a37e-980273f84508.jpg',
      },
    ]
    var ul = document.querySelector('.pagination')
    var page_number = 5 //单页浏览的条数
    var Total_pages //页数
    var liAll //页码按钮下标为 1到length-2是页数 0和length-1为上一页和下一页
    var pre //上一页
    var next //下一页

    function clearTable() {
      table.innerHTML = `
        <tbody>
             <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>图片路径</th>
            </tr>
        </tbody>
        `
    }
    window.onload = function () {
      json.forEach(function (item, i) {
        var tbody = document.querySelector('tbody')
        if (i < page_number) {
          var tr = document.createElement('tr')
          tr.innerHTML = `
                            <td>${item.product_name}</td>
                            <td>${item.price}</td>
                            <td>${item.imgurl}</td>
                            `
          tbody.appendChild(tr)
        }
      })

      var len = json.length //总记录条数

      //   var Total_pages //页数
      // var liAll //页码按钮下标为 1到length-2是页数 0和length-1为上一页和下一页
      // var pre //上一页
      // var next //下一页
      Total_pages =
        len % page_number == 0 ? len / page_number : len / page_number + 1 //页数
      //totalPage = (total + pagesize -1) / pagesize;

      for (var i = 1; i <= Total_pages; i++) {
        ul.innerHTML += `
            <li  id="${i}"><a href="#">${i}</a></li>
            `
      }

      ul.innerHTML += `
                <li id="next">
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
        `
      liAll = document.querySelectorAll('li')
      liAll[1].childNodes[0].style.color = 'red' //初始第一页页码是红的
      // console.log([liAll])
      var pagethis = 1 //当前是第几页
      for (var i = 1; i < liAll.length - 1; i++) {
        liAll[i].onclick = function () {
          for (var j = 1; j < liAll.length - 1; j++) {
            liAll[j].childNodes[0].style.color = 'blue'
          }
          pagethis = this.id //获取当前是第几页
          liAll[pagethis].childNodes[0].style.color = 'red'
          // console.log(liAll[i])
          let start //当页数据的起始下标
          let end //当页数据的结束下标
          if (pagethis != 1) {
            start = (pagethis - 1) * page_number
            end = start + page_number
            if (end > json.length - 1) {
              //如果当页数据结束值大于总数据条数下标的值则赋值为总数据条数最大下标值
              end = json.length - 1
            }
          } else {
            start = 0
            end = page_number - 1
          }
          // console.log("start=" + start)
          // console.log("end=" + end)
          clearTable()
          var tbody = document.querySelector('tbody')
          json.forEach(function (item, i) {
            if (i >= start && i <= end) {
              var tr = document.createElement('tr')
              tr.innerHTML = `
                            <td>${item.product_name}</td>
                            <td>${item.price}</td>
                            <td>${item.imgurl}</td>
                            `
              tbody.appendChild(tr)
            }
          })
        }
      }
      pre = document.querySelector('#pre') //上一页
      next = document.querySelector('#next') //下一页
      pre.onclick = function () {
        // alert(pagethis)
        if (pagethis != 1) {
          //当前页数不等于1时执行上一页
          pagethis--
          for (var j = 1; j < liAll.length - 1; j++) {
            liAll[j].childNodes[0].style.color = 'blue'
          }
          liAll[pagethis].childNodes[0].style.color = 'red'
          let start
          let end
          if (pagethis != 1) {
            start = (pagethis - 1) * page_number
            end = start + page_number
            if (end > json.length - 1) {
              end = json.length - 1
            }
          } else {
            start = 0
            end = page_number - 1
          }

          clearTable()
          var tbody = document.querySelector('tbody')
          json.forEach(function (item, i) {
            if (i >= start && i <= end) {
              var tr = document.createElement('tr')
              tr.innerHTML = `
                            <td>${item.product_name}</td>
                            <td>${item.price}</td>
                            <td>${item.imgurl}</td>
                            `
              console.log(tr)
              tbody.appendChild(tr)
            }
          })
        }
      }
      next.onclick = function () {
        // alert(pagethis)
        if (pagethis < liAll.length - 2) {
          //当前页数小于最后一页则执行下一页
          pagethis++
          for (var j = 1; j < liAll.length - 1; j++) {
            liAll[j].childNodes[0].style.color = 'blue'
          }
          liAll[pagethis].childNodes[0].style.color = 'red'
          let start
          let end
          if (pagethis != 1) {
            start = (pagethis - 1) * page_number
            end = start + page_number
            if (end > json.length - 1) {
              end = json.length - 1
            }
          } else {
            start = 0
            end = page_number - 1
          }

          clearTable()
          var tbody = document.querySelector('tbody')
          json.forEach(function (item, i) {
            if (i >= start && i <= end) {
              var tr = document.createElement('tr')
              tr.innerHTML = `
                            <td>${item.product_name}</td>
                            <td>${item.price}</td>
                            <td>${item.imgurl}</td>
                            `
              console.log(tr)
              tbody.appendChild(tr)
            }
          })
        }
      }
    }
  </script>
</html>
